<template>
	<view class="employee-content" style="background-color: #fff;">
		<view class="employee-collapse-item" v-for="(employee,index) in employeeData" :key="index" @click="editHander(employee)">
			<view class="employee-collapse-item-name">
				<image class="employee-collapse-item-img" src="../../../../static/login_user.png" mode="scaleToFill">
				</image>
				<text>{{employee.name}}</text>
			</view>
			<view class="">
				{{employee.position}}
			</view>
			<view class="">
				  {{mobileHandler(employee.mobile)}}
			</view>
		</view>
		<view class="employee-btn">
			<button type="primary" @click="add" style="background-color: #007aff;">添加员工</button>
		</view>
	</view>
</template>

<script>
	import { getCompanyStaffInfo } from "@/api/user.js"
	export default {
		data() {
			return {
				employeeData: [],
				value: ['0'],
			}
		},
		methods: {
			editHander:function(item){
				console.log("员工===",item);
				uni.navigateTo({
					url:"/pages/user/auth/employee/addEmployee?data="+JSON.stringify(item) 
				})
			},
			mobileHandler:function(data){
				const f=data.substring(0,3)
				const t=data.substring(7)
				return `${f}****${t}`
			},
			change: function() {
				console.log('1111');
			},
			add: function() {
				console.log("添加员工");
				uni.navigateTo({
					url: "/pages/user/auth/employee/addEmployee"
				})
			},
			getInfoData:function(){
				const data=uni.getStorageSync("login")
				if(data){
					getCompanyStaffInfo(data.company_auth.id).then(res=>{
						this.employeeData=res.data
					})
				}
				
			}
		},
		onShow() {
			this.getInfoData()
		},
		onLoad(option) {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: '#2D56C5',
				animation: {
					duration: 400,
					timingFunc: 'easeIn'
				}
			})
			const that = this;
			// const eventChannel = this.getOpenerEventChannel();
			// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
			// eventChannel.on('employeeList', function(data) {
			// 	that.employeeData = data.data
			// })
		}
	}
</script>

<style scoped lang="scss">
	.employee-collapse {
		background-color: #fff;
		padding: 0 14px;
		margin-top: 10px;
	}

	.employee-collapse-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 40px;
		padding: 5px 10px;
		margin: 5px;
		&-name {
			display: flex;
			align-items: center;
		}

		&-img {
			width: 25px;
			height: 25px;
			background-color: #CCCCCC;
			border-radius: 50%;
			padding: 5px;
			margin-right: 10px;
		}
	}

	.employee-btn {
		position: fixed;
		bottom: 0;
		height: 80px;
		box-shadow: 0rpx -4rpx 6rpx 0rpx rgba(230, 230, 230, 0.75);
		background-color: #fff;
		width: 100%;
		display: flex;
		align-items: center;

		button {
			width: 80%;
		}
	}
</style>